<clr-modal [(clrModalOpen)]="isOpen" *ngIf="streams" [clrModalClosable]="!isRunning">
  <h3 *ngIf="streams?.length === 1" class="modal-title">Confirm Undeploy Stream</h3>
  <h3 *ngIf="streams?.length > 1" class="modal-title">Confirm Undeploy Streams</h3>
  <div class="modal-body" *ngIf="streams.length === 1 && !isRunning">
    This action will undeploy the stream <strong>{{ streams[0].name }}</strong
    >. Are you sure?
  </div>
  <div class="modal-body" *ngIf="streams?.length > 1 && !isRunning">
    This action will undeploy the <strong>{{ streams.length }} stream definitions</strong> listed below. Are you sure?
    <br />
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="left">Name</th>
          <th class="left">Definition</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let stream of streams">
          <td class="left">
            <strong class="text-truncate" style="max-width: 230px">{{ stream.name }}</strong>
          </td>
          <td class="left">
            <span class="dsl-text dsl-truncate" style="max-width: 200px">
              <app-stream-dsl [dsl]="stream.dslText" [expandable]="false"></app-stream-dsl>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-body" *ngIf="isRunning">
    <clr-spinner clrInline clrSmall></clr-spinner>
    Undeploying stream(s) ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="isOpen = false" [disabled]="isRunning">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="unregister()" [disabled]="isRunning">
      <span *ngIf="streams.length === 1">Undeploy the stream</span>
      <span *ngIf="streams.length > 1">Undeploy the streams</span>
    </button>
  </div>
</clr-modal>
